import React from 'react';
import { Card, Tag, Button, Divider } from 'react-vant';

import './style.css';
import { sn } from '@/utils/common';

interface OrderCardProps {
  order: ResponseOrdersDto;
  onAcceptOrder: (orderId: number) => Promise<void>;
}

const OrderCard: React.FC<OrderCardProps> = ({ order, onAcceptOrder }) => {
  const getStatusColor = () => {
    if (order.status < 0) {
      return 'danger';
    }
    switch (order.status) {
      case 0:
        return 'warning';
      case 1:
      case 2:
        return 'primary';
      case 3:
      case 4:
        return 'success';
      default:
        return 'default';
    }
  };

  const getStatusText = () => {
    switch (order.status) {
      case 0:
        return '待接单';
      case 1:
        return '待发货';
      case 2:
        return '待收货';
      case 3:
      case 4:
        return '已完成';
      case -1:
        return '已拒绝';
      case -2:
      case -3:
        return '已取消';
      case -4:
        return '已拒收';
      default:
        return '未知状态';
    }
  };

  const handleAcceptOrder = async () => {
    await onAcceptOrder(order.id);
  };

  return (
    <Card round className="order-card">
      <div className="order-header">
        <div className="order-number">{order.orderId}</div>
        <Tag plain type={getStatusColor()} className="order-status">
          {getStatusText()}
        </Tag>
      </div>
      <div className="order-customer">供应商: {order.supplierName}</div>
      <div className="order-time">下单时间: {order.createtimeStr}</div>
      <Divider />
      <div className="order-items">
        {order.details.map((item, index: any) => (
          <div key={index} className="order-item">
            <span className="item-name">{item.name}</span>
            <span className="item-quantity">
              x{item.count}
              {sn(item.receivedCount, (receivedCount) => (
                <>(x{receivedCount})</>
              ))}
            </span>
            <span className="item-price">
              ¥{item.promotePrice ? item.promotePrice.toFixed(2) : item.price.toFixed(2)}
            </span>
          </div>
        ))}
      </div>
      <Divider />
      <div className="order-footer">
        <div>
          总计:{' '}
          {
            <span className={order.payMoney ? 'invaild-price' : 'order-total'}>
              ¥{order.shouldPayMoney.toFixed(2)}
            </span>
          }
          {<>&nbsp;&nbsp;&nbsp;</>}
          {sn(order.payMoney, (payMoney) => (
            <>
              实付：<span className="order-total">¥{payMoney!.toFixed(2)} </span>
            </>
          ))}
        </div>
        {(() => {
          if (order.status < 0) {
            return <></>;
          }
          switch (order.status) {
            case 0:
            case 1:
              return <></>;
            case 2:
              return (
                <Button type="success" onClick={handleAcceptOrder}>
                  确认收货
                </Button>
              );
            case 3:
            case 4:
              return <></>;
            default:
              return <></>;
          }
        })()}
      </div>
    </Card>
  );
};

export default OrderCard;
